<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>属性绑定</title>
	<script src="js/vue.js"></script>
	<style>
	.blue{color: blue;}
	</style>
</head>
<body>
		
<div id="app">
	<div v-bind:title="`说明：` + title">鼠标悬浮</div>
	<a v-bind:href="url"> 1{{name}} </a>
	<p v-bind:class="'blue'">2{{name}}</p>
	
	<!-- v-bind 的缩写：就用一个冒号就行了 -->
	<p :class="'blue'">2.1{{name}}</p>
	
	<p :class="css_blue">3{{name}}</p>
	<p :class="{blue: is_blue}">4{{name}}</p>
	
	<!-- 设置多个class -->
	<p :class="{blue: is_blue, red: is_red}">5{{name}}</p>
	
	<!-- 设置多个class，用数组的方式 -->
	<p :class="[css_blue, css_red]">6{{name}}</p>
	
	<!-- style 数组方式 -->
	<p :style="[style_color, style_size]">7{{text}}</p>
	
	<!-- style 对象方式 -->
	<p :style="{color:'red', fontSize:'14px'}">8{{text}}</p>
	
	<!-- style 对象方式 - 动态绑定 -->
	<p :style="style_all">9{{text}}</p>
</div>

</body>
<script>
let vm = new Vue({
	el:'#app',
	data: {
		title: "这是一个title",
		url: 'http://www.baidu.com',
		name: '百度一下',
		text: '容易走的路都是下坡路',
		css_blue: 'blue',
		css_red: 'red',
		is_blue: true, //false
		is_red: true,
		style_color: {color: 'green'},
		style_size: {fontSize: '20px'},
		style_all: {
			color: 'red',
			fontSize: '20px'
		}
	}
})
</script>
</html>
